<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .list {
            width: 200px;
            height: 150px;
            background-color: skyblue;
            overflow: auto;
        }

        .news {
            height: 30px;
        }
    </style>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../newjs/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../newjs/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../newjs/babel.min.js"></script>

<script type="text/javascript" src="../newjs/prop-types.js"></script>

<script type="text/babel">
    // 慢动作回放----使用index索引值做为key
    // 初始数据:
    //     {id:1,name:'小张',age:18},
    //     {id:2,name:'小李',age:19},
    // 初始的虚拟DOM:
    //     <li key=0>小张---18</li>
    //     <li key=1>小李---19</li>
    // 更新后的数据:
    //     {id:3,name:'小王',age:20},
    //     {id:1,name:'小张',age:18},
    //     {id:2,name:"小李',age:19},
    // "更新数据后的虚拟DOM:
    //     <li key=0>小王---20</li>
    //     <li key=1>小张---18</li>
    //     <li key=2>小李---19</li>

// ---------------------------------------------------

    // 慢动作回放----使用id唯一标识做为key
    // 初始数据:
    //     {id:1,name:'小张',age:18},
    //     {id:2,name:'小李',age:19},
    // 初始的虚拟DOM:
    //     <li key=1>小张---18</li>
    //     <li key=2>小李---19</li>
    // 更新后的数据:
    //     {id:3,name:'小王',age:20},
    //     {id:1,name:'小张',age:18},
    //     {id:2,name:"小李',age:19},
    // "更新数据后的虚拟DOM:
    //     <li key=3>小王---20</li>
    //     <li key=1>小张---18</li>
    //     <li key=2>小李---19</li>
    class Person extends React.Component {
        state = {
            persons: [
                {id: 1, name: '小张', age: 18},
                {id: 2, name: '小李', age: 19},
            ]
        }

        add = () => {
            const {persons} = this.state
            const p = {id: persons.length + 1, name: '小王', age: 20}
            this.setState({persons: [p, ...persons]})
        }

        render() {
            return (
                <div>
                    <h2>展示人员信息</h2>
                    <button onClick={this.add}>添加一个小王</button>
                    <h3>使用index索引值作为key</h3>
                    <ul>
                        {
                            this.state.persons.map((personObj, index) => {
                                return <li key={index}>{personObj.name}---{personObj.age}<input type="text"></input></li>
                            })
                        }
                    </ul>
                    <hr></hr>
                    <hr></hr>
                    <h3>使用id(数据的唯一标识)作为key</h3>
                    <ul>
                        {
                            this.state.persons.map((personObj) => {
                                return <li key={personObj.id}>{personObj.name}---{personObj.age}<input type="text"></input></li>
                            })
                        }
                    </ul>
                </div>
            );
        }
    }

    //2.渲染组件到页面
    ReactDOM.render(<Person></Person>, document.getElementById('test'))
</script>
</body>
</html>

